<template>
  <el-row>
    <el-col :span="18" :offset="3">
     <template >
        <el-button type="primary" class="el-icon-plus" @click="addSpu">添加</el-button>   
    </template>
    <el-table
     :data="spu"
      border
     style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      align="center"
      width="150">
    </el-table-column>
     <el-table-column
      label="图片"
      align="center"
      height="80"
      width="175">
     <template slot-scope="scope">
     <el-image :src="scope.row.img"></el-image>
     </template>
    
    </el-table-column>   
    <el-table-column
      prop="title"
      label="标题"
      align="center"
      width="180">
    </el-table-column>
    <el-table-column
      prop="subtitle"      
      label="副标题"
      align="center"
      width="180"
      >
    </el-table-column>
     <el-table-column
      prop="price"
      label="价格"
      align="center"
      width="180">
    </el-table-column>
     <el-table-column 
      label="是否上架"
      align="center"
      width="180">
     <template slot-scope="scope">
      <span style="margin-left: 10px">{{scope.row.online=='1'?'是':'否'}}</span>
     </template>
    </el-table-column>
     <el-table-column
      label="操作"
      align="center"
      width="180">
      <template slot-scope="scope">
         <el-button  type="info" icon="el-icon-message"  size="mini" @click="updateSpu(scope.row.id)">编辑</el-button>
         <el-button type="danger" icon="el-icon-delete"  size="mini" @click="deleteSpu(scope.row.id,scope.row.title)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="showSpu"
        :page-size="5"
        :total="total">
      </el-pagination>
      </el-col>
      <add-spu ref="addspu" @refresh="showSpu" :current="current"></add-spu>
      <edit-spu ref="editspu" :current="current" @refresh="showSpu"></edit-spu>
      </el-row>
   </template>

<script>
import addSpu from '@/views/spu/addSpu.vue'
import editSpu from '@/views/spu/editSpu.vue'
export default {
  components:{
     addSpu,
     editSpu
  },
    data(){
        return{
            spu:[],
            total:0,
            current:1,         
        }
    },
     mounted(){
        this.showSpu()
     },
     methods:{
         showSpu(current=1){
         this.$http.get(`spu?page=${current}`)
        .then(res=>{
            this.spu=res.data.data.data
            this.total=res.data.data.total
            this.current=res.data.data.current
           
        })
        },
        addSpu(){
          this.$refs.addspu.isShowAddSpu=true
        },
        updateSpu(id){
          this.$refs.editspu.isShowEditSpu=true
          this.$refs.editspu.updateSpu(id)
        },
          

        async deleteSpu(id,title){
        try{
         await  this.$confirm(`是否删除${title}这条数据`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
          const r=await this.$http.delete(`/spu/${id}`)
          if(r.data.code==1){
                this.$message({
                type: 'success',
                message: '删除成功!'
              })
            this.showSpu()
          }
            
            }catch(err){
              this.$message({
                type: 'success',
                message: '取消删除!'
              })
         console.log(err)
        }
       } 
     }
   
}
 
</script>

<style lang="scss" scoped>

</style>